<template>
	<view>
		<view :class="['PolicyList', !shaiXuanType ? 'MatchReportList' : '']"
			:style="{ background: dialogTypes ? '#ffffff' : '#f7f8fc' }">
			<view class="PolicyLists">
				<view class="PolicyViews">
					<view :class="['PolicyShaiSelect', regionActive ? 'on' : '']" @click="showRegionSelect">政策区划</view>
					<view v-for="(item, index) in tabsList" :key="index"
						:class="['PolicyShaiSelect', activeIndex === index ? 'on' : '']"
						@click="changeTabsEvent(index)">{{ item.title }}</view>
				</view>
				<view class="PolicyViews" v-if="shaiXuanType">
					<view class="PolicyShaiXuan" @click="changeFilter">筛选</view>
				</view>
				<!-- 政策区划下拉框 -->
				<view class="PolicyViewsDiaLog" v-if="showRegionDialog" :style="{ top: isMatch ? '70rpx' : '55rpx' }">
					<view class="PolicyViewsDiaLogLi region-wrapper">
						<shAddress @change="change" v-model="data"></shAddress>
						<text class="clear-btn" @click.stop="clearRegion">清除</text>
					</view>
				</view>
				<!-- 原有的下拉框 -->
				<view class="PolicyViewsDiaLog" v-if="dialogTypes && !showRegionDialog"
					:style="{ top: isMatch ? '70rpx' : '55rpx' }">
					<view v-for="(item, index) in selectList[activeIndex]" :key="index" :class="[
              'PolicyViewsDiaLogLi',
              activeTabsIndex[activeIndex] === index ? 'on' : '',
            ]" @click="changeSelect(item, index)">{{ item.label }}</view>
				</view>
			</view>
			<view class="PolicyListsText" v-if="shaiXuanType && isMatch">共为您找到{{ total }}条结果</view>
		</view>
		<view @touchmove.prevent class="ZheZhaoNews" v-if="dialogTypes || showRegionDialog" @click="closeAllDialog"
			:style="{
        height: !isMatch ? 'calc(100% - 700rpx)' : 'calc(100% - 300rpx)',
      }"></view>
	</view>
</template>

<script>
	import shAddress from "@/components/sh-address/sh-address.vue"
	export default {
		components: {
			shAddress
		},
		props: {
			tabsList: Array,
			selectList: Array,
			shaiXuanType: {
				type: Boolean,
				default: true,
			},
			isMatch: {
				type: Boolean,
				default: true,
			},
			total: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				dialogTypes: false,
				activeIndex: -1,
				activeTabsIndex: [],
				showRegionDialog: false, // 控制政策区划下拉框显示
				regionActive: false, // 控制政策区划激活状态

				data: [],
			};
		},
		methods: {
			//清除筛选
			clearFilter() {
				this.data = [];
				this.dialogTypes = false;
				this.showRegionDialog = false;
				this.regionActive = false;
				this.activeIndex = -1;
				this.activeTabsIndex.fill(-1);
				this.$emit("clearFilter");
			},

			change(addressInfo) {
				// 过滤掉空值并拼接
				const addressArray = [
					addressInfo.province,
					addressInfo.city,
					addressInfo.area
				].filter(item => item && item.trim() !== '');

				// 使用 join 方法拼接字符串
				const str = addressArray.join(',');

				console.log("选择了--->", str);
				this.$emit("changeAddress", str);
				this.showRegionDialog = false;
			},

			// 显示政策区划下拉框
			showRegionSelect() {
				this.showRegionDialog = true;
				this.regionActive = true;
				this.dialogTypes = false;
				this.activeIndex = -1;
			},
			// 关闭所有弹出框
			closeAllDialog() {
				this.dialogTypes = false;
				this.showRegionDialog = false;
				this.regionActive = false;
				this.activeIndex = -1;
			},
			changeTabsEvent(index) {
				this.activeIndex = index;
				this.dialogTypes = true;
				this.showRegionDialog = false;
				this.regionActive = false;
			},
			changeFilter() {
				this.dialogTypes = false;
				this.showRegionDialog = false;
				this.regionActive = false;
				this.activeIndex = -1;
				this.$emit("changeFilterEvent");
			},
			changeSelect(item, index) {
				this.dialogTypes = false;
				this.activeTabsIndex[this.activeIndex] = index === 0 ? -1 : index;
				this.tabsList[this.activeIndex].selectValue =
					index === 0 ? -1 : item.value;
				this.$emit("changeSelectEvent");
			},
			// 添加清除方法
			clearRegion() {
				this.data = [];
				this.$emit("changeAddress", "");
			},
		},
		mounted() {
			//初始化选中列表
			this.activeTabsIndex = new Array(this.tabsList.length).fill(-1);
		},
	};
</script>

<style lang="scss">
	.ZheZhaoNews {
		overflow: hidden;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: calc(100% - 300rpx);
		z-index: 98;
		background: rgba(0, 0, 0, 0.5);
	}

	.PolicyList {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #f7f8fc;
		margin-top: -28rpx;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;

		&.MatchReportList {
			padding-bottom: 14rpx;
		}

		.PolicyLists {
			display: flex;
			justify-content: center;
			padding: 20rpx 0 0;

			/* #ifdef H5 */
			padding: 10rpx 0 0;

			/* #endif */
			.PolicyViewsDiaLog {
				position: absolute;
				top: 70rpx;
				left: 0;
				width: 100%;
				padding: 12rpx 48rpx 20rpx;
				box-sizing: border-box;
				background: #ffffff;
				z-index: 99;
				border-radius: 0 0 20rpx 20rpx;

				/* #ifdef H5 */
				margin-top: -20rpx;
				/* #endif */

				.PolicyViewsDiaLogLi {
					font-size: 28rpx;
					color: #202020;
					line-height: 60rpx;

					&.region-wrapper {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.clear-btn {
						font-size: 24rpx;
						color: #999;
						padding: 0 10rpx;
						cursor: pointer;
					}

					&.on {
						color: #2f59fe;
						padding-left: 37rpx;
						background: url("/static/images/duigouimt.png") no-repeat left center / 28rpx 21rpx;
					}
				}
			}

			.PolicyShaiSelect {
				font-size: 28rpx;
				color: #202020;
				padding: 0 27rpx 0 0;
				margin: 0 24rpx;
				background: url("/static/images/xiajianimg.png") no-repeat right center / 15rpx 9rpx;

				&.on {
					background: url("/static/images/shangjianimg.png") no-repeat right center / 15rpx 8rpx;
				}
			}

			.uni-select {
				margin: 0 !important;
				border: 0 !important;
				width: 200rpx !important;
				padding: 0 24rpx !important;

				.uni-select__input-text {
					font-size: 28rpx;
					color: #202020 !important;
				}

				.uni-icons {
					color: #202020 !important;
				}
			}

			.PolicyViews {
				display: flex;
				align-items: center;
			}

			.PolicyShaiXuan {
				font-size: 28rpx;
				color: #202020;
				padding: 0 28rpx 0 24rpx;
				background: url("/static/images/shaixuanimg.png") no-repeat right center / 18rpx 18rpx;
			}
		}

		.PolicyListsText {
			width: 100%;
			font-size: 24rpx;
			color: #4e5262;
			text-align: right;
			padding: 18rpx 0 28rpx;
		}
	}
</style>